<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f9f9f9;
        color: #333;
    }

    .container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    h1 {
        text-align: center;
        color: #444;
        margin-bottom: 20px;
        font-size: 24px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    table th, table td {
        text-align: center;
        padding: 10px;
        border: 1px solid #ddd;
    }

    table thead th {
        background-color: #007BFF;
        color: #fff;
        font-weight: bold;
    }

    table tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    table tbody tr:hover {
        background-color: #f0f8ff;
    }

    table td img {
        max-width: 60px;
        height: auto;
        border-radius: 4px;
    }

    table td {
        font-size: 14px;
    }

    .table-bordered {
        border: 1px solid #ccc;
    }

    th, td {
        border-color: #ddd;
    }

    .action-btn {
        display: inline-block;
        padding: 5px 10px;
        color: #fff;
        background-color: #28a745;
        border-radius: 4px;
        text-decoration: none;
        font-size: 12px;
    }

    .action-btn:hover {
        background-color: #218838;
    }
    /* 样式同前，添加新样式 */
    table td img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 4px;
    }

    button {
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
    }
    .btnDelete {
        background-color: #dc3545;
        color: white;
    }
    .btnDelete:hover {
        background-color: #c82333;
    }
    .btnUpdate {
        background-color: #ffc107;
        color: black;
    }
    .btnUpdate:hover {
        background-color: #e0a800;
    }
    .form-container {
        background-color: #ffffff;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-top: 20px;
        width: 100%;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .form-container h3 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: bold;
    }

    .form-container label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #555;
    }

    .form-container input, .form-container select {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 14px;
        box-sizing: border-box;
        transition: all 0.3s ease;
    }

    .form-container input:focus, .form-container select:focus {
        border-color: #007BFF;
        outline: none;
    }

    .form-container input[type="number"], .form-container input[type="text"], .form-container input[type="url"], .form-container input[type="date"] {
        background-color: #fafafa;
    }

    .form-container button {
        width: 100%;
        padding: 12px;
        border: none;
        background-color: #28a745;
        color: white;
        font-size: 16px;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .form-container button:hover {
        background-color: #218838;
    }

    .form-container .form-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .form-container .form-row .form-group {
        width: 48%;
        margin-bottom: 15px;
    }
</style>
<script src="js/jquery-3.7.1.js"></script>
</head>
<body>
<div class="container">
    <h1>商品信息</h1>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th><input type="checkbox" id="selectAll"> 全选</th>
            <th>编号</th>
            <th>名称</th>
            <th>类型</th>
            <th>价格</th>
            <th>库存</th>
            <th>图片</th>
            <th>上架日期</th>
            <th>描述</th>
            <th>销量</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="list">
        </tbody>
    </table>
    <div class="form-container">
        <h3>新增商品</h3>
        <label>编号：</label>
        <input type="text" id="productId" name="productId" placeholder="商品编号" />

        <label>名称：</label>
        <input type="text" id="productName" name="productName" placeholder="商品名称" />

        <label>类型：</label>
        <select id="productType" name="productType">
            <option value="">加载中...</option>
        </select>

        <label>价格：</label>
        <input type="number" id="productPrice" name="productPrice" placeholder="商品价格" />

        <label>库存：</label>
        <input type="number" id="productStock" name="productStock" placeholder="商品库存" />

        <label>图片链接：</label>
        <input type="url" id="productImg" name="productImg" placeholder="商品图片链接" />

        <label>上架日期：</label>
        <input type="date" id="productDate" name="productDate" placeholder="上架日期" />

        <label>描述：</label>
        <input type="text" id="productDesc" name="productDesc" placeholder="商品描述" />

        <label>销量：</label>
        <input type="number" id="productSales" name="productSales" placeholder="商品销量" />


        <label>状态：</label>
        <input type="radio" id="productStatus1" name="productStatus" value="1" />上架
        <input type="radio" id="productStatus0" name="productStatus" value="0" />下架
        <button id="addProductBtn">新增商品</button>
    </div>
</div>
<script>
    $(document).ready(function () {
        $.ajax("type?action=list",{
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (data.length > 0) {
                    let options = '<option value="">请选择类型</option>';
                    data.forEach(function (type) {
                        options += `<option value="${type.name}">${type.name}</option>`;
                    });
                    $("#productType").html(options);
                } else {
                    $("#productType").html('<option value="">暂无类型</option>');
                }
            },
            error: function (xhr, status, error) {
                console.log("请求失败：", status, error);  // 输出错误信息
                $("#productType").html('<option value="">加载失败，请刷新重试</option>');
            }
        })
        // 获取商品信息
        $.ajax("product", {
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                for (let i = 0; i < data.length; i++) {
                    let tr = $("<tr></tr>");
                    let th = $("<th><input type='checkbox' class='itemCheckbox'></th>");
                    let th1 = $("<td>" + data[i].id + "</td>");
                    let th2 = $("<td>" + data[i].name + "</td>");
                    let th3 = $("<td>" + data[i].type + "</td>");
                    let th4 = $("<td>" + data[i].price + "</td>");
                    let th5 = $("<td>" + data[i].count + "</td>");
                    // let th6 = $("<td><img src='" + data[i].img + "'></td>");
                    let th6 = $("<td>" + data[i].image + "</td>");
                    let th7 = $("<td>" + data[i].date + "</td>");
                    let th8 = $("<td>" + data[i].desc + "</td>");
                    let th9 = $("<td>" + data[i].sale + "</td>");
                    let th10 = $("<td><input type='checkbox' disabled " + (data[i].status === 1 ? 'checked' : '') + "></td>");
                    let th11 = $("<td><button class='btnDelete'>删除</button> <button class='btnUpdate'>修改</button></td>");
                    tr.append(th).append(th1).append(th2).append(th3).append(th4).append(th5).append(th6).append(th7).append(th8).append(th9).append(th10).append(th11);
                    $("#list").append(tr);

                }
            }
        });


        // 全选功能
        $('#selectAll').click(function () {
            $('.itemCheckbox').prop('checked', $(this).prop('checked'));
        });

        $('#list').on('change', '.itemCheckbox', function () {
            $('#selectAll').prop('checked', $('.itemCheckbox:checked').length === $('.itemCheckbox').length);
        });

        // 删除行
        $(document).on('click', '.btnDelete', function () {
            if (confirm('确定要删除该商品吗？')) {
                var id = $(this).closest("tr").find("td:eq(0)").text();
                console.log(id)
                $.ajax("delete",{
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: id
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.code === 200) {
                            $(this).closest('tr').remove();
                            location.reload();
                            alert('商品已删除');
                        } else {
                            alert('删除失败，请重试');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log("请求失败：", status, error);
                        alert('请求失败，请稍后再试');
                    }
                });
            }
        });


        // 修改商品
        $(document).on('click', '.btnUpdate', function () {
            const row = $(this).closest("tr");
            const productId = row.find("td:eq(0)").text();
            const productName = row.find("td:eq(1)").text();
            const productType = row.find("td:eq(2)").text();
            const productPrice = row.find("td:eq(3)").text();
            const productStock = row.find("td:eq(4)").text();
            const productImg = row.find("td:eq(5)").text();
            const productDate = row.find("td:eq(6)").text();
            const productDesc = row.find("td:eq(7)").text();
            const productSales = row.find("td:eq(8)").text();
            const productStatus = row.find("td:eq(9)").find("input").prop("checked") ? 1 : 0;

            // 填充表单
            $('#productId').val(productId);
            $('#productName').val(productName);
            $('#productType').val(productType);
            $('#productPrice').val(productPrice);
            $('#productStock').val(productStock);
            $('#productImg').val(productImg);
            $('#productDate').val(productDate);
            $('#productDesc').val(productDesc);
            $('#productSales').val(productSales);
            $("input[name='productStatus'][value='" + productStatus + "']").prop('checked', true);

            // 更新按钮
            $(".form-container h3").text("修改商品信息");
            $('#addProductBtn').text('修改商品');
            $('#addProductBtn').off('click').on('click', function () {
                updateProduct(productId);
            });
        });

        // 更新商品
        function updateProduct(productId) {
            const productName = $('#productName').val();
            const productType = $('#productType').val();
            const productPrice = $('#productPrice').val();
            const productStock = $('#productStock').val();
            const productImg = $('#productImg').val();
            const productDate = $('#productDate').val();
            const productDesc = $('#productDesc').val();
            const productSales = $('#productSales').val();
            const productStatus = $('input[name="productStatus"]:checked').val();

            // 验证字段
            if (!productName || !productType || !productPrice || !productStock || !productImg || !productDate || !productDesc || !productSales || !productStatus) {
                alert('请确保所有字段都已填写');
                return;
            }

            // 提交更新请求
            $.ajax("updata",{

                type: 'POST',
                data: {
                    productId,
                    productName,
                    productType,
                    productPrice,
                    productStock,
                    productImg,
                    productDate,
                    productDesc,
                    productSales,
                    productStatus
                },
                success: function () {
                    alert('商品已成功更新');
                    location.reload();  // 刷新商品列表
                },
                error: function () {
                    alert('更新商品失败，请重试');
                }
            });
        }
        // 新增商品
        $('#addProductBtn').click(function () {
            const productId = $('#productId').val();
            const productName = $('#productName').val();
            const productType = $('#productType').val();
            const productPrice = $('#productPrice').val();
            const productStock = $('#productStock').val();
            const productImg = $('#productImg').val();
            const productDate = $('#productDate').val();
            const productDesc = $('#productDesc').val();
            const productSales = $('#productSales').val();
            const productStatus = $('input[name="productStatus"]:checked').val();

            // 验证字段是否填写完整
            if (!productId || !productName || !productType || !productPrice || !productStock || !productImg || !productDate || !productDesc || !productSales || !productStatus) {
                alert('请确保所有字段都已填写');
                return;
            }

            // 提交数据到后台
            $.ajax({
                url: 'insert',
                type: 'POST',
                data: {
                    productId,
                    productName,
                    productType,
                    productPrice,
                    productStock,
                    productImg,
                    productDate,
                    productDesc,
                    productSales,
                    productStatus
                },
                success: function (response) {
                    alert('商品已成功新增');
                    location.reload();  // 刷新商品列表
                },
                error: function (xhr, status, error) {
                    alert('新增商品失败，请重试');
                }
            });
        });
    });
</script>
</body>
</html>